<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.ajax的创建</title>
</head>
<body>
    <button id="btnNode">发送ajax</button>
    <div id="textNode"></div>
    <h1>原来的数据</h1>

    <script>
        btnNode.onclick = function() {
            // 1 创建ajax 的对象
            var xhr = new XMLHttpRequest()
            // 2 发送ajax 请求
            // 2.1 准备发送
            xhr.open("GET","./server/a.txt",true);
            // 2.2 直接发送
            xhr.send()
            // 3 得到响应解析数据
            // 3.1 进行监听操作 操作ajax的变化
            xhr.onreadystatechange = function(e) {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    // 获取响应数据
                    var value = xhr.responseText
                    console.log(value);
                    textNode.innerText=value;
                }
                // // 请求已完成，且响应已就绪
                // if(xhr.readyState === 4) {
                //     // 判断响应是否正确
                //     if(xhr.status === 200) {
                //     }
                // }

            }

        }

    </script>
    
</body>
</html>